<!-- 右侧导航条 -->
<template>
  <div class="rightNavigation">
    <div class="r1">预约试听</div>
    <span class="r2">课程介绍</span>
    <span class="r3">联系我们</span>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.rightNavigation{
  position: fixed;
  right: 8px;
  bottom: 5px;
  z-index: 1000;
  width: 128px;
  height: 225px;
  background: url('../../assets/components/rightNavigation.png');
  .r1{
    height: 65px;
    display: flex;
    align-items: flex-end;
    position: absolute;
    top: 3px;
    left: 66px;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
  }
  .r2{
    height: 65px;
    display: flex;
    align-items: flex-end;
    position: absolute;
    top: 78px;
    left: 66px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
  }
  .r3{
    height: 65px;
    display: flex;
    align-items: flex-end;
    position: absolute;
    top: 151px;
    left: 66px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
  }
  &:hover{
    background: url('../../assets/components/rightNavigation2.png');
  }
}
</style>